<template>
  <div class="person_wapper">
  	<p class="title">{{formTitle}}</p>
    <form-detail class='form_wappers' :formData='formData'></form-detail>
    <p class="title">{{tableTitle}}</p>
    <table-panel class='table_wappers' :labelList='labelList' :tableData='tableData' :control='false'></table-panel>
  </div>
</template>

<script>
import formDetail from '../../components/common/form/formDetail.vue'
import tablePanel from '../../components/common/table/table.vue'
import {apiCaseListPersonDetail,apiCaseListCaseDetail} from '../../api/api'
export default{
	components:{
    	tablePanel,
    	formDetail
	},
	data(){
		return {
      formTitle: "案件详情",
			tableTitle : '犯案人列表',
			labelList:{
        xm : '姓名',
        zjhm : '身份证号',
        rybh : '人员编号',
        hjdz : '户籍地址',
        kszxsj: '开始执行时间',
        zxcs: '执行处所',
        cslb: '类别'
      },
			tableData :[],
			formData:[],
      formShow : {
        ajbh : '',
        ab : '',
        ajmc : '',
        ajstate : '',
        zbdw : '',
        ajxbry : '',
        ajzbry : '',
        fadd : '',
        fadd_qx : '',
        fasjcz : '',
        fasjzz : '',
        sdtd : '',
        xzsj : '',
        zagj : '',
        zars : '',
        zyaq : '',
      },
      translateList : {
        ajbh : '案件编号',
        ab : '案件类别',
        ajmc : '案件名称',
        ajstate : '案件状态',
        ajxbry : '案件协办人员',
        ajzbry : '案件主办人员',
        fadd_qx : '案发区域',
        fadd : '案发地点详址',
        fasjcz : '案发开始时间',
        fasjzz : '案发结束时间',
        lasj: '立案时间',
        sdtd : '手段特点',
        xzsj : '作案时机',
        zagj : '作案工具',
        zars : '作案人数',
        zbdw : '主办单位',
        zyaq : '简要案情',
      },
		}
	},
  methods : {

  },
  mounted(){
    apiCaseListCaseDetail(this.$route.query.ajbh).then((res)=> {
      let resData = Object.assign({},this.formShow,JSON.parse(res.data.result));
      for(let [key,value] of Object.entries(resData)){
        if(/fasj/.test(key)){
          this.formData.push({label : this.translateList[key],value : new Date(value)._toLocaleString()});
        }else{
          this.formData.push({label : this.translateList[key],value : value});
        }

      }
    })
    apiCaseListPersonDetail(this.$route.query.ajbh,1,20).then((res)=> {
      let resData = JSON.parse(res.data.result);
      this.tableData = resData.list;
    })

  },
}
</script>

<style lang="scss" scoped>
.form_wappers,.count,.table_wappers {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}
.form_wappers {
  /*padding: 12px;*/
  background-color: #eee;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.count {
  margin: 12px auto;
  span {
    em {
      color: red;
    }
  }
}
.pagination {
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 20px;
}
.title {
	width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    background: rgba(230, 243, 252, 1);
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-family: "微软雅黑";
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
</style>
